<template>
  <div style="display: flex;">
    <table class="table">
      <thead>
        <tr v-for="(items, indexs) in newArr" :key="indexs">
          <th v-for="(item, index) in items" :key="index" :rowspan="item.rowspan" :colspan="item.colspan">
            <span v-if="item.title == 'null'">&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</span>
            <span v-else>{{ item.title }}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(items, index) in dataList" :key="index">
          <td v-for="item in items.tdList" :key="item" :rowspan="resetRowSpan(index, item)"
            :colspan="resetColSpan(index, item, items)" :style="items[item].style">
            <span v-if="items[item].value == 'null'">&ensp;&ensp;&ensp;&ensp;</span>
            <span v-else>{{ items[item].value }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>

export default {
  props: {
    columns: {
      type: Array
    },
    dataList: {
      type: Array
    },
    title: {
      type: String,
      default: ''
    },
    lineHeight: {
      type: Number,
      default: 33
    },
    fontSize: {
      type: Number,
      default: 13
    },
  },
  components: {
    // EditableCell
  },
  data() {
    return {
      //表头原始参数
      newArr: [[]],        //表头
      maxHeight: 1,         //表头总共占的行数
      colKeyList: [],        //所有的key
      //tbody具体数据
      needRowSpan: [],        //tbody需要跨行的key
      span: {}
    }
  },
  watch: {
    lineHeight(newVal) {
      this.$el.style.setProperty("--lineHeight", newVal + 'px');
    },
    fontSize(newVal) {
      this.$el.style.setProperty("--fontSize", newVal + 'px');
    }
  },
  mounted() {
    this.$el.style.setProperty("--lineHeight", this.lineHeight + 'px');
    this.$el.style.setProperty("--fontSize", this.fontSize + 'px');


    this.maxHeight = this.getMaxFloor(this.columns);       //1. 计算出表头一共需要多少行
    this.columnsHandle(this.columns);                       //2. 对表头进行处理
    this.dataHandle(this.dataList, this.needRowSpan);         // 3. 对数据进行处理（传入参数： 具体数据，需要跨行列的（key））
  },
  methods: {
    resetColSpan(row, key, item_) {
      var colspan = 1
      this.newArr[0].forEach((item) => {
        if (item.key == key) {
          if (!Array.isArray(item_[key])) {
            colspan = item.colspan
          } else {
            colspan = item.colspan / item_[key].length
          }
        }
      })
      return colspan
    },
    resetRowSpan(row, key) {
      if (this.span[key] && this.span[key][row]) {
        return this.span[key][row];
      }
      return 1;
    },
    gerMaxCol(items) {
      let max = 0;
      function each(data) {
        if (max < data.length) {
          //  max = data.length;
          // 如果表头有children ， 则父亲的colspan 为children的colspan之和
          data.forEach((item) => {
            max += item.colspan
          })
        }
        data.forEach((item) => {
          if (item.children) {
            each(item.children);
          }
        });
      }
      each(items);
      return max;
    },
    getMaxFloor(treeData) {
      //const that = this;
      let max = 0;
      function each(data, floor) {
        data.forEach((e) => {
          if (floor > max) {
            max = floor;
          }
          if (e.children && e.children.length > 0) {
            each(e.children, floor + 1);
          }
        });
      }
      each(treeData, 1);
      return max;
    },
    columnsHandle(treeData) {
      const that = this;
      const maxFloor = this.maxHeight;
      // const keyList = [];
      function each(data, index) {
        if (that.newArr[index] === undefined) {
          that.newArr[index] = [];
        }
        data.forEach((e) => {
          const obj = {
            title: e.title,
            key: e.key,
            rowspan: maxFloor,
            colspan: e.colspan ? e.colspan : 1,
          };

          // 判断没有children 
          if (e.children && e.children.length > 0) {
            obj.colspan = that.gerMaxCol(e.children);
            obj.rowspan = maxFloor - that.getMaxFloor(e.children);
          } else {
            that.colKeyList.push(e.key);
            if (e.hasrowspan) {             //  如果存在hasrowspan属性并且值为true，则表明该key列存在跨行
              that.needRowSpan.push(e.key);
            }
          }
          that.newArr[index].push(obj);
          if (e.children && e.children.length > 0) {
            each(e.children, index + 1);
          }
        });
      }
      each(treeData, 0);
    },
    dataHandle(dataList, needRowSpan) {
      needRowSpan.forEach((key) => {
        const sum = {};
        let i = 0; let k = 0;
        const that = this;
        for (let j = 0; j < dataList.length; j += 1) {
          i += 1;
          let tdList = [];
          if (dataList[j].tdList) {
            tdList = [...dataList[j].tdList];
          } else {
            tdList = [...that.colKeyList];
          }
          if (dataList[j - 1] && (dataList[j][key].value === dataList[j - 1][key].value || !dataList[j][key].value)) {
            const index = tdList.indexOf(key);
            if (index > -1) {
              tdList.splice(index, 1);
            }
          }
          dataList[j].tdList = tdList;
          if (dataList[j + 1] && dataList[j + 1][key].value) {
            if (dataList[j][key].value !== dataList[j + 1][key].value) {
              sum[k] = i;
              i = 0; k = j + 1;
            }
          } else if (!dataList[j + 1]) {
            sum[k] = i;
          }
        }
        this.span[key] = sum;
      });

      // 拆分横向
      dataList.forEach((item) => {

        var tdList = []
        if (!item.hasOwnProperty('tdList')) {
          item.tdList = []
        }
        item.tdList.forEach((items) => {
          if (Array.isArray(item[items])) {
            let datas = item[items]
            datas.forEach((item_, index_) => {
              let name = items + index_
              tdList.push(name)
              item[name] = item_
            })
          } else {
            tdList.push(items)
          }
        })
        item.tdList = tdList
      })
      this.showTable = true;
    },
  }

}
</script>
<style>
table,
.tables {
  /* page-break-inside: avoid;
   page-break-after: avoid;
    page-break-before: avoid; */
}

.tables td:first-child {
  width: 50px;
  min-width: 50px;
  border-right: none !important;
}

.A4 {
  width: calc(100% - 0px);
}

.name {
  text-align: center;
  font-weight: 500;
  font-size: 24px;
  line-height: 50px;
}

.titleName {
  font-size: 15px;
  color: #000;
  font-weight: 500 !important;
  text-align: center;
  margin: 5px 0;
}

th {
  font-weight: normal;
}

.tables {
  border-bottom: none !important;
  border-right: none !important;
  top: 1px !important;
  border: none !important;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fontSize);
  color: #000;
  font-weight: normal !important;
  border: 1px solid #000;
  margin-top: -1px;
  position: relative;
  top: 0.5px;
  table-layout: fixed;

}

.table thead tr th {
  height: 40px;
  /* white-space: nowrap; */
  overflow: hidden;
}

.tables .table tbody tr td:first-child {
  /* white-space: nowrap; */
  word-wrap: break-word;
  word-break: break-all;

}

.tables .table thead tr th {
  /* white-space: nowrap; */
  word-wrap: break-word;
  word-break: break-all;
}

.tables .table thead tr th:first-child {
  min-width: 20%;
}


.table td,
.table th {
  text-align: center;
  border: 1px solid #000;
}

.table thead tr th,
.table tbody tr td {
  padding: 0 5px;
  height: var(--lineHeight);
}

.table tbody tr td {
  height: var(--lineHeight);
}
</style>
